<template>
  <div class="index" ref="index">
    <!-- 首页第一屏 -->
    <div class="index-con" >
      <swiper :options="swiperOption" ref="mySwiper" id="mySwiper">
        <!--必须的组件-->
        <!--每页幻灯片使用swiper-slide标签-->
        <!--幻灯片组件生成的标签自带.swiper-slide的类名，但单类名选择器设置的部分css(如宽高)将被覆盖-->
        <swiper-slide
          v-for="item in swiper_slide_item"
          :key="item.id"
          class="swiper_slide_item"
        >
          <div style="width: 100vw; height: 735px; position: relative">
            <img :src="item.img" alt="" style="width: 100%; height: 100%" />
            <div style="position: absolute; top: 1; z-index: 999">w</div>
          </div>
        </swiper-slide>

        <!-- 可选的控件 -->
        <!--分页器-->
        <div class="swiper-pagination" slot="pagination"></div>
        <!--滚动条-->
        <div class="swiper-scrollbar" slot="scrollbar"></div>
        <!-- 前进后退按钮
        <div class="swiper-button-prev" slot="button-prev"></div> 
        <div class="swiper-button-next" slot="button-next"></div> -->
      </swiper>
      <div class="center-btn">
        <div class="center-btn-1 center-btn-item">
          <img
            class="center-btn-item-img"
            src="../assets/center-btn-1-icon.png"
            alt=""
          />
          <div class="center-btn-item-word">{{$t('Inquire about getting a plan')}}</div>
        </div>
        <div class="center-btn-2 center-btn-item">
          <img
            class="center-btn-item-img"
            src="../assets/center-btn-2-icon.png"
            alt=""
            style="width: 19px"
          />
          <div class="center-btn-item-word">{{$t('View the case study')}}</div>
        </div>
      </div>
    </div>
    <div class="index-topbar" ref="indexTopbar">
      <div class="index-topbar-box">
        <div class="index-topbar-left">
          <div class="index-topbar-left-img">
            <img src="../assets/index-top-left-logo.png" alt="" />
          </div>
        </div>
        <div class="index-topbar-right">
          <div class="index-topbar-right-top">
            <div class="index-topbar-right-top-box">
  
              <div class="index-topbar-right-top-phoneNum">Call: 400-000-000</div>
              <div class="index-topbar-right-top-line"></div>
              <div class="index-topbar-right-top-langChange" >
                <el-dropdown @command="handleSetLanguage">
                <img src="../assets/langChange-icon.png" alt="" style="width: 25px;height: 25px;cursor: pointer;">
                <!-- <span class="el-dropdown-link">
                    {{$i18n.locale=='zh' ? '中文' :'英文'}}<i class="el-icon-arrow-down el-icon--right"></i>
                </span> -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="en" :disabled="$i18n.locale=='en'">English</el-dropdown-item>
                    <el-dropdown-item command="zh" :disabled="$i18n.locale=='zh'">简体中文</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
              </div>
              <div class="index-topbar-right-top-img">
                <img
                  style="width: 12px; height: 17px"
                  src="../assets/index-topbar-right-top-phone.png"
                  alt=""
                />
              </div>
              <div class="index-topbar-right-top-img">
                <img
                  src="../assets/index-topbar-right-top-microblog.png"
                  alt=""
                />
              </div>
              <div class="index-topbar-right-top-img">
                <img src="../assets/index-topbar-right-top-wechat.png" alt="" />
              </div>
            </div>
          </div>
          <div class="index-topbar-right-bottom">
            <ul class="index-topbar-right-bottom-navList">
              <li @click="changeNavAct($event,'Home')" ref="Home" class="active_nav">{{$t('Home')}}</li>
              <li @click="changeNavAct($event,'Areas')">{{ $t('Product') }}{{ $t('Areas') }}</li>
              <li @click="changeNavAct($event,'Success stories')"> {{ $t('Success stories')}}</li>
              <li @click="changeNavAct($event,'News & Updates')"> {{ $t('News & Updates')}}</li>
              <li @click="changeNavAct($event,'About us')">{{ $t('About us')}}</li>
              <li @click="changeNavAct($event,'Contact us')">{{ $t('Contact us')}}</li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据 -->
    <div class="data">
      <ul class="data-list">
        <li class="data-list-item">
          <div class="data-list-item-word1">
            <div class="data-list-item-word1-num">230</div>
            <div>多个</div>
          </div>
          <div class="data-list-item-word2">
            {{$t('Trade relations spread across countries and regions')}}
          </div>
        </li>
        <li class="data-list-item">
          <div class="data-list-item-word1">
            <div class="data-list-item-word1-num">8000</div>
            <div>多个</div>
          </div>
          <div class="data-list-item-word2">
            {{$t('Merchants establish a good relationship')}}
          </div>
        </li>
        <li class="data-list-item">
          <div class="data-list-item-word1">
            <div class="data-list-item-word1-num">16000</div>
            <div>平方米</div>
          </div>
          <div class="data-list-item-word2">{{$t('China-Europe Trade Center')}}</div>
        </li>
        <li class="data-list-item">
          <div class="data-list-item-word1">
            <div class="data-list-item-word1-num">90</div>
            <div>余个</div>
          </div>
          <div class="data-list-item-word2">
            {{$t('Well-known matches and famous trademarks')}}
          </div>
        </li>
      </ul>
    </div>
    <!-- 业务领域 -->
    <div class="business" ref="business">
      <div class="top">
        <div class="top-title">{{$t('Business area')}}</div>
        <div class="top-text">
          {{$t("Over the years, we have made outstanding contributions to the development of the country's foreign economic and trade industry")}}
        </div>
      </div>
      <div class="center">
        <ul class="itemList">
          <li class="item">
            <div class="item-img">
              <img src="../assets/business-item-img-1.png" alt="" />
            </div>
            <div class="item-title">进出口</div>
            <div class="item-text">
              跨越国境的货品和服务交易，一般由进口贸易和出口贸易所组成，因此也可称之为进出口贸易。
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="../assets/business-item-img-2.png" alt="" />
            </div>
            <div class="item-title">创新产业</div>
            <div class="item-text">
              紧紧围绕集团发展定位着重在电子商务、海外仓、外贸综合服务平台等方面下工夫
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="../assets/business-item-img-3.png" alt="" />
            </div>
            <div class="item-title">房地产租赁</div>
            <div class="item-text">
              跨越国境的货品和服务交易，一般由进口贸易和出口贸易所组成
            </div>
          </li>
          <li class="item">
            <div class="item-img">
              <img src="../assets/business-item-img-4.png" alt="" />
            </div>
            <div class="item-title">物流产业</div>
            <div class="item-text">
              紧紧围绕集团发展定位着重在电子商务、海外仓、外贸综合服务平台，取得初步成果。
            </div>
          </li>
        </ul>
      </div>
      <div class="bottom">
        <div class="btn">{{$t('More business areas')}}</div>
      </div>
    </div>
    <!-- 公司简介 -->
    <div class="company">
      <div class="company-con">
        <div class="company-con-img">
          <div class="company-con-img-item1">
            <img src="../assets/company-con-img-1.jpg" alt="" />
          </div>
          <div class="company-con-img-item2">
            <div class="company-con-img-text">
              <div>创新品</div>
              <div>赢天下</div>
            </div>
          </div>
          <div class="company-con-img-item3">
            <div class="company-con-img-text">
              <div>为您提供高品质外贸服务</div>
            </div>
          </div>
        </div>
        <div class="company-con-introduce">
          <div class="introduce-title">某某进出口贸易有限公司</div>
          <div class="introduce-text">
            公司致力于成为中国最新锐的活动品牌营销、媒体运营以及文化产品整合机构，自成立以来，凭借良好的政府社会资源和项目运营能力，一直服务于大型地产品牌、政府机关、以及知名企业品牌。自成立9年以来，以每年超过100%的业绩增长额度飞速发展！我们拥有经验丰富的广告人才，拓展了最新的外联资源，具备了务实细致的工作态度和前瞻的眼光。
          </div>
          <div class="introduce-btn">{{$t('Find out more')}}+</div>
        </div>
      </div>
    </div>
    <!-- 成功案例 -->
    <div class="successCase" ref="successCase">
      <div class="successCase-top">
        <div class="successCase-top-word1">{{$t('Success stories')}}</div>
        <!-- <div class="successCase-top-word2">Successful cases</div> -->
      </div>
      <div class="successCase-center">
        <div class="successCase-center-left">
          <div class="successCase-center-left-word">科技产品外贸销售案例</div>
          <div class="successCase-center-left-icon">
            <img src="../assets/successCase-center-left-icon.png" alt="" />
          </div>
        </div>
        <div class="successCase-center-item successCase-center-item1">
          <div class="successCase-center-item-img">
            <img src="../assets/successCase-center-item2-bg.jpg" alt="" />
          </div>
          <div class="successCase-center-item-word1">化妆品外贸</div>
          <div class="successCase-center-item-word2">The foreign trade</div>
        </div>
        <div class="successCase-center-item successCase-center-item2">
          <div class="successCase-center-item-img">
            <img src="../assets/successCase-center-item3-bg.jpg" alt="" />
          </div>
          <div class="successCase-center-item-word1">科技产品</div>
          <div class="successCase-center-item-word2">
            Science and technology
          </div>
        </div>
      </div>
      <div class="successCase-bottom">
        <div class="btn">{{$t('More success stories')}}</div>
      </div>
    </div>
    <!-- 咨询动态 -->
    <div class="consult" ref="consult">
      <div class="consult-box">
        <div class="consult-left">
          <div class="consult-left-top">
            <ul class="consult-left-navList">
              <li
                @click="changeNavItem($event)"
                class="consult-left-navItem active-navItem"
              >
                {{$t('Group dynamics')}}
              </li>
              <li @click="changeNavItem($event)" class="consult-left-navItem">
                {{$t('State-owned dynamics')}}
              </li>
              <li @click="changeNavItem($event)" class="consult-left-navItem">
                {{$t('Industry information')}}
              </li>
              <div class="consult-left-navList-more">{{$t('more')}}+</div>
            </ul>
          </div>
          <div class="consult-left-con">
            <ul class="consult-left-con-itemList">
              <li class="consult-left-con-item1">
                <div class="consult-left-con-item-img">
                  <img src="../assets/consult-left-con-item-img.jpg" alt="" />
                </div>
                <div class="consult-left-con-item1-con">
                  <div class="consult-left-con-item1-con-title">
                    重金悬赏 一字千金 新合作国际商贸城品牌广告语征集
                  </div>
                  <div class="consult-left-con-item1-con-time">
                    2019年08月22日 11:36
                  </div>
                  <div class="consult-left-con-item1-con-text">
                    新合作国际商贸城品牌广告语征集
                    新合作国际商贸城是《湖南省“十二五”物流业发展规划》确定的十个省级重点建设物流园区之一,是省、市领导挂点联...
                  </div>
                </div>
              </li>
              <li class="consult-left-con-item">
                <div class="consult-left-con-item-text">
                  巫山·亿丰国际商贸城营销中心正式开放
                </div>
                <div class="consult-left-con-item-time">2019-07-23</div>
              </li>
              <li class="consult-left-con-item">
                <div class="consult-left-con-item-text">
                  [推广]围观!居然之家成功入驻雅安国际商贸城~
                </div>
                <div class="consult-left-con-item-time">2019-07-23</div>
              </li>
              <li class="consult-left-con-item">
                <div class="consult-left-con-item-text">
                  毛铺7月 “100万征集毛铺品质广告语”月度入围奖火热出炉
                </div>
                <div class="consult-left-con-item-time">2019-07-23</div>
              </li>
              <li class="consult-left-con-item">
                <div class="consult-left-con-item-text">
                  万元悬赏征集广告语!给你一个机会定义世界
                </div>
                <div class="consult-left-con-item-time">2019-07-23</div>
              </li>
            </ul>
          </div>
        </div>
        <div class="consult-right">
          <div class="consult-right-con">
            <div class="consult-right-con-word1">{{$t('Promotional video')}}</div>
            <!-- <div class="consult-right-con-word2">Promotional video</div> -->
            <div class="consult-right-con-mp4">
              <video-player
                ref="videoPlayer"
                class="player-video"
                :playsinline="false"
                :options="playOptions"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 立即咨询 -->
    <div class="contact" ref="contact">
      <div class="contact-box">
        <div class="contact-title">
          {{$t('Internationalize your business – the world is so small, and you can order from all over the world!')}}
        </div>
        <div class="contact-button">{{$t('Enquire now')}}</div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="bottomCon" ref="bottomCon">
      <div class="bottom-box">
        <div class="bottom-left">
          <div class="bottom-left-img">
            <img
              src="../assets/index-top-left-logo.png"
              alt=""
              style="width: 164px; height: 68px"
            />
          </div>
          <ul class="bottom-left-itemList">
            <li class="bottom-left-item">
              <div class="bottom-left-item-icon">
                <img
                  src="../assets/bottom-left-item-icon-1.png"
                  alt=""
                  style="width: 12px; height: 14px"
                />
              </div>
              <div class="bottom-left-item-text">
                Address : 010, Ideal Building, Chaoyang District, Beijing
              </div>
            </li>
            <li class="bottom-left-item">
              <div class="bottom-left-item-icon">
                <img
                  src="../assets/bottom-left-item-icon-2.png"
                  alt=""
                  style="width: 11px; height: 12px"
                />
              </div>
              <div class="bottom-left-item-text">Phone : 400-000-0000</div>
            </li>
            <li class="bottom-left-item">
              <div class="bottom-left-item-icon">
                <img
                  src="../assets/bottom-left-item-icon-3.png"
                  alt=""
                  style="width: 13px; height: 13px"
                />
              </div>
              <div class="bottom-left-item-text">E-mail : 1233456@123.com</div>
            </li>
            <li class="bottom-left-item">
              <div class="bottom-left-item-icon">
                <img
                  src="../assets/bottom-left-item-icon-4.png"
                  alt=""
                  style="width: 16px; height: 12px"
                />
              </div>
              <div class="bottom-left-item-text">WeChat : 1245_weixin</div>
            </li>
          </ul>
        </div>
        <div class="bottom-center">
          <div class="bottom-center-con">
            <ul class="bottom-center-con-itemList">
              <li class="bottom-center-con-item bottom-center-con-item1">
                {{$t('Business area')}}
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Import and export')}}</a>
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Innovative industries')}}</a>
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Real estate leasing')}}</a>
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Logistics industry')}}</a>
              </li>
            </ul>
            <ul class="bottom-center-con-itemList">
              <li class="bottom-center-con-item bottom-center-con-item1">
                {{$t('News & Updates')}}
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('News & Updates')}}</a>
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('State-owned news')}}</a>
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Media coverage')}}</a>
              </li>
            </ul>
            <ul class="bottom-center-con-itemList">
              <li class="bottom-center-con-item bottom-center-con-item1">
                {{$t('About us')}}
              </li>
              <li class="bottom-center-con-item">
                <a href="">{{$t('Company Profile')}}</a>
              </li>
              <li class="bottom-center-con-item"><a href="">{{$t('Careers')}}</a></li>
              <li class="bottom-center-con-item"><a href="">{{$t('Contact us')}}</a></li>
            </ul>
          </div>
        </div>
        <div class="bottom-right">
          <div class="bottom-right-img">
            <img src="../assets/bottom-right-img.png" alt="" />
          </div>
          <div class="bottom-right-word">WeChat public account</div>
        </div>
      </div>
    </div>
    <!-- 备案信息 -->
    <div class="archivalInformation">
      Copyright @ 2018 . All rights reserved. 某某灯饰照明版权所有
    </div>
    <!-- 侧边工具条 -->
    <div class="toolBar-show" @click="changeToolBarShow">
      <img v-if="toolBarShow" src="../assets/toolBar-show-block.png" alt="" />
      <img v-if="!toolBarShow" src="../assets/toolBar-show-none.png" alt="" />
    </div>
    <div class="toolBar">
      <div class="toolBar-up" @click="windowScroll(200)">
        <img src="../assets/toolBar-up-img.png" alt="" />
      </div>
      <div class="toolBar-phone">
        <img
          src="../assets/toolBar-phone-img.png"
          @mouseenter="moveIn('toolBar-phone-box')"
          alt=""
        />
        <div
          class="toolBar-phone-box"
          @mouseleave="moveOut('toolBar-phone-box')"
        >
          <div class="toolBar-phone-box-top">Direct phone calls</div>
          <div class="toolBar-phone-box-num">138888888</div>
        </div>
      </div>
      <div class="toolBar-email" @mouseenter="moveIn('toolBar-email-box')">
        <img src="../assets/toolBar-email-img.png" alt="" />
        <div
          class="toolBar-email-box"
          @mouseleave="moveOut('toolBar-email-box')"
        >
          Send an email
        </div>
      </div>
      <div class="toolBar-down" @click="windowScroll(-200)">
        <img src="../assets/toolBar-down-img.png" alt="" />
      </div>
    </div>
    <div v-if="showModule" class="backTop" @click="backTop">
      <img src="../assets/backTop-img.png" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scrollHeight:0,
      playOptions: {
        height: '200px',
        width: '100%',
        playbackRates: [1.0, 2.0, 3.0], // 可选的播放速度
        autoplay: true, // 如果为true,浏览器准备好时开始回放
        muted: false, // 默认情况下静音播放
        loop: false, // 是否视频一结束就重新开始
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据，auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值，值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小，换句话说，它将按比例缩放以适应其容器
        sources: [
          {
            type: 'video/mp4', // 类型
            src: require('../assets/consult-right-con-mp4.mp4') // url地址，在使用本地的资源时，需要用require()引入，否则控制台会报错
          }
        ],
        poster: require('../assets/consult-right-con-mp4-bg.png'), // 设置封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息
        controlBar: {
          currentTimeDisplay: true,
          progressControl: true, // 是否显示进度条
          playbackRateMenuButton: true, // 是否显示调整播放倍速按钮
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      toolBarShow: true,
      translateX: 0,
      showModule: false,
      swiper_slide_item: [
        {
          img: require('../assets/index-swiper1.jpg'),
          title: '科技产品外贸销售案例'
        },
        {
          img: require('../assets/index-swiper2.jpg'),
          title: '化妆品外贸'
        }
      ],
      swiperOption: {
        //幻灯片放映方向
        // direction: 'vertical',  //纵向
        direction: 'horizontal', //横向
        //分页器配置项
        pagination: {
          el: '.swiper-pagination', //分页器的类名
          clickable: true, // 点击分页器跳切换到相应的幻灯片
          type: 'bullets' | 'progressbar' | 'fraction', //小圆点|进度条|数字页码
          dynamicBullets: true, //动态小圆点(type:'bullets'时)
          //自定义分页器，需设置样式
          renderBullet (index, className) {
            return `<span class="${className} swiper-pagination-bullet-custom">${
              index + 1
            }</span>`
          }
        },
        //前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },

        //滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
          hide: true
        },

        //幻灯片播放配置项
        loop: true, //是否循环播放
        speed: 1000, // 发生页面切换动画时，动画的切换速度
        autoplay: {
          delay: 2000, // 幻灯片停留时间
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          stopOnLastSlide: true // 切换到最后一个slide时是否停止自动切换。（loop模式下无效）。
        },
        on: {
          slideChangeTransitionEnd: function () {
            // console.log(this.activeIndex) //每次切换结束时，在控制台打印现在是第几个slide
          }
        }
      }
    }
  },
  methods: {
    handleSetLanguage(lang) {
          this.$i18n.locale = lang;
          sessionStorage.setItem('language',lang)
          console.log(this.$i18n);
          // 修改页面标题,还需在路由里面配置
          this.$nextTick(()=>{
           document.title = this.$t(this.$route.name)
          })
      },
    changeToolBarShow () {
      this.toolBarShow = !this.toolBarShow
      const toolBar = document.querySelector('.toolBar')
      if (this.toolBarShow) {
        toolBar.style.transform = 'translateX(0px)'
      } else {
        toolBar.style.transform = 'translateX(100px)'
      }
    },
    moveIn (val) {
      const toolBarEmailBox = document.querySelector(`.${val}`)
      toolBarEmailBox.style.transform = 'translateX(0px)'
    },
    moveOut (val) {
      const toolBarEmailBox = document.querySelector(`.${val}`)
      toolBarEmailBox.style.transform = 'translateX(200px)'
    },
    imageSlideUp (val) {
      window.addEventListener('scroll', function () {
        var image = document.querySelector(`.${val}`)
        var imagePosition = image.getBoundingClientRect().top
        var windowHeight = window.innerHeight

        if (imagePosition < windowHeight) {
          image.classList.add('animate')
        }
      })
    },
    changeNavItem (e) {
      const activeItem = document.querySelector('.active-navItem')
      if (activeItem) activeItem.classList.remove('active-navItem')
      e.target.classList.add('active-navItem')
      const consultLeftCon = document.querySelector('.consult-left-con')
      consultLeftCon.classList.remove('animate')
      setTimeout(() => {
        consultLeftCon.classList.add('animate')
      }, 500)
    },
    windowScroll (val) {
      window.scrollTo({
        top: window.pageYOffset - Number(val),
        behavior: 'smooth' // 平滑滚动效果
      })
    },
    handleScroll () {
      const scrollPosition = window.scrollY || window.pageYOffset
      if (scrollPosition > (window.innerHeight-100)) {
        this.showModule = true
        this.$refs.indexTopbar.style.background = 'rgb(0 0 0 / 69%)'
      } 
      else {
        this.showModule = false
        this.$refs.indexTopbar.style.background = ''
      }
    },
    backTop () {
      window.scrollTo({
        top: 0,
        behavior: 'smooth' // 平滑滚动效果
      })
    },
    changeNavAct (e,val) {
      const activeItem = document.querySelector('.active_nav')
      if (activeItem) activeItem.classList.remove('active_nav')
      e.target.classList.add('active_nav')
    if(val == 'Home'){
      this.scrollHeight = 0
    } else if(val == 'Areas'){
        this.scrollHeight = this.$refs.business.offsetTop
      }else if(val == 'Success stories'){
        this.scrollHeight = this.$refs.successCase.offsetTop
      }else if(val == 'News & Updates'){
        this.scrollHeight = this.$refs.consult.offsetTop
      }else if(val == 'About us'){
        this.scrollHeight = this.$refs.contact.offsetTop
      }else if(val == 'Contact us'){
        this.scrollHeight = this.$refs.bottomCon.offsetTop
      }
      window.scrollTo({
        top: this.scrollHeight,
        behavior: 'smooth' // 平滑滚动效果
      })
    }
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.handleScroll)
  },
  mounted () {
    this.imageSlideUp('center')
    this.imageSlideUp('introduce-text')
    this.imageSlideUp('successCase-center-item1')
    this.imageSlideUp('successCase-center-item2')
    this.imageSlideUp('consult-left-con')
    window.addEventListener('scroll', this.handleScroll)
  }
}
</script>
<style lang="scss" scoped>
.index {
  scroll-behavior: smooth;
  background: #f1f4f8;
  // overflow-y: scroll;
}

.index-con {
  width: 100%;
  height: 735px;
  position: relative;
  // background: url('../assets/index-swiper1.jpg');
  background-size: 100% 100%;
}

.index-topbar {
  display: flex;
  justify-content: space-between;
  height: 120px;
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  .index-topbar-box{
    width: 1200px;
    margin:  0 auto;
    display: flex;
  justify-content: space-between;
    .index-topbar-left {
      width: 100%;
      margin-top: 30px;
  
      .index-topbar-left-img {
        width: 164px;
        height: 68px;
  
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  
    .index-topbar-right {
      display: flex;
      flex-direction: column;
  
      .index-topbar-right-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
  
        .index-topbar-right-top-box {
          width: 250px;
          position: absolute;
          right: 0;
          top: 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
        
        }
  
        .index-topbar-right-top-line {
          width: 1px;
          height: 25px;
          background: #ffffff41;
        }
  
        .index-topbar-right-top-phoneNum {
          color: #fff;
          font-size: 12px;
        }
  
        .index-topbar-right-top-img {
          width: 20px;
          height: 20px;
          cursor: pointer;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
  
      .index-topbar-right-bottom {
        width: 600px;
        height: 100px;
        margin-top: 30px;
  
        .index-topbar-right-bottom-navList {
          display: flex;
          justify-content: space-between;
          align-items: center;
          width: 100%;
          height: 100%;
  
          .active_nav {
            color: #fff;
          }
        }
  
        .index-topbar-right-bottom-navList li {
          color: #999;
          font-size: 14px;
          cursor: pointer;
        }
  
        .index-topbar-right-bottom-navList li:hover {
          color: #fff;
        }
      }
    }
  }
}

.center-btn {
  position: absolute;
  bottom: 200px;
  display: flex;
  width: 100%;
  height: 100px;
  justify-content: center;
  z-index: 999;

  .center-btn-item {
    width: 340px;
    height: 48px;
    border-radius: 15px;
    color: #fff;
    background: #0a8af0;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;

    .center-btn-item-img {
      width: 23px;
      height: 19px;
      margin-right: 10px;
    }
  }

  .center-btn-1:hover {
    background: #008fff;
    opacity: 0.8;
  }

  .center-btn-2 {
    background: #17ae98;
    margin-left: 40px;
    opacity: 0.8;
  }

  .center-btn-2:hover {
    background: #0fb59d;
    opacity: 0.8;
  }
}

.data {
  background: #fff;
  width: 100%;
  height: 130px;

  .data-list {
    height: 100%;
    margin: 0 auto;
    width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .data-list-item {
      width: 25%;
      font-size: 14px;

      .data-list-item-word2 {
        height: 38px;
        padding-right: 20px;
      }

      .data-list-item-word1 {
        display: flex;
        margin-bottom: 10px;

        .data-list-item-word1-num {
          font-size: 28px;
          font-weight: 700;
          margin-right: 5px;
        }
      }
    }
  }
}

.business {
  width: 1200px;
  height: 720px;
  margin: 0 auto;

  .top {
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #333;

    .top-title {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .top-text {
      font-size: 14px;
    }
  }

  .center {
    width: 100%;
    height: 360px;

    // animation: imageSlideUp 0.5s ease-out;
    .itemList {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: space-between;

      .item {
        padding: 40px;
        background: #fff;
        width: 23%;
        display: flex;
        flex-direction: column;
        align-items: center;

        &:hover {
          // box-shadow: inset 0 0 6px rgba(0,0,0,.5);
        }

        &:hover .item-title {
          color: #008fff;
        }

        .item-img {
          width: 124px;
          height: 124px;
        }

        .item-title {
          font-size: 18px;
          font-weight: 700;
          margin: 30px 0;
        }

        .item-text {
          color: #999;
          font-size: 12px;
          text-align: center;
        }
      }
    }
  }

  .bottom {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;

    .btn {
      cursor: pointer;
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      position: relative;
      width: 240px;
      height: 48px;
      border-radius: 15px;
      background: rgb(0, 143, 255);
      box-shadow: rgb(0, 143, 255) 0px 3px 19px -8px;

      &::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 15px;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0)
        );
        opacity: 0.8;
        z-index: 111;
      }
    }
  }
}

.company {
  width: 100%;
  padding: 100px 0;
  background: #fff;

  .company-con {
    margin: 0 auto;
    width: 1200px;
    height: 320px;
    display: flex;
    justify-content: space-between;

    .company-con-img {
      display: flex;

      .company-con-img-item1 {
        width: 310px;
        height: 320px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .company-con-img-item2 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
        width: 89px;
        height: 320px;
        background: url('../assets/company-con-img-2.jpg');
        background-size: 100% 100%;

        .company-con-img-text {
          width: 5px;
          height: 40%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #fff;
          font-size: 14px;
        }
      }

      .company-con-img-item3 {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 2px;
        width: 89px;
        height: 320px;
        background: url('../assets/company-con-img-3.jpg');
        background-size: 100% 100%;

        .company-con-img-text {
          width: 5px;
          height: 60%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          color: #fff;
          font-size: 14px;
        }
      }
    }

    .company-con-introduce {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 50px 0;
      margin-left: 100px;

      .introduce-title {
        font-size: 22px;
        color: #333;
        font-weight: 700;
      }

      .introduce-text {
        font-size: 14px;
        color: #333;
      }

      .introduce-btn {
        font-size: 14px;
        color: #333;
        cursor: pointer;

        &:hover {
          color: #008fff;
        }
      }
    }
  }
}

.successCase {
  width: 1200px;
  margin: 0 auto;
  height: 740px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 80px 0;

  .successCase-top {
    .successCase-top-word1 {
      font-size: 28px;
      color: #333;
    }

    .successCase-top-word2 {
      font-size: 14px;
      color: #888;
      margin-top: 5px;
    }
  }

  .successCase-center {
    width: 100%;
    height: 350px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .successCase-center-left {
      width: 570px;
      height: 100%;
      background: url('../assets/successCase-center-item1-bg.jpg');
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      padding: 290px 30px 0 30px;

      .successCase-center-left-word {
        cursor: pointer;
        font-size: 18px;
        color: #fff;

        &:hover {
          color: #008fff;
        }
      }
    }

    .successCase-center-item {
      height: 100%;
      width: 275px;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: #fff;

      .successCase-center-item-img {
        width: 235px;
        height: 211px;
        cursor: pointer;
        overflow: hidden;

        &:hover img {
          transform: scale(1.1);
        }

        img {
          transition: all 0.4s ease;
          width: 100%;
          height: 100%;
        }
      }

      .successCase-center-item-word1 {
        font-size: 14px;
        color: #333;
        cursor: pointer;
        margin: 20px 0;

        &:hover {
          color: #008fff;
        }
      }

      .successCase-center-item-word2 {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .successCase-bottom {
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: center;

    .btn {
      cursor: pointer;
      margin-top: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      position: relative;
      width: 240px;
      height: 48px;
      border-radius: 15px;
      background: rgb(0, 143, 255);
      box-shadow: rgb(0, 143, 255) 0px 3px 19px -8px;

      &::before {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        border-radius: 15px;
        background: linear-gradient(
          to bottom,
          rgba(255, 255, 255, 0.8),
          rgba(255, 255, 255, 0)
        );
        opacity: 0.8;
        z-index: 111;
      }
    }
  }
}

.consult {
  width: 100%;
  height: 660px;
  background: #fff;

  .consult-box {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .consult-left {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      .consult-left-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 30px;

        .consult-left-navList {
          position: relative;
          width: 100%;
          height: 50px;
          font-size: 14px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #ededed;

          .consult-left-navItem {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 30px;
            cursor: pointer;

            // &:hover {
            //   font-size: 20px;
            //   font-weight: 700;
            //   border-bottom: 1px solid #008fff;
            // }
          }

          .active-navItem {
            font-size: 20px;
            font-weight: 700;
            border-bottom: 1px solid #008fff;
          }

          .consult-left-navList-more {
            position: absolute;
            right: 0px;
            cursor: pointer;

            &:hover {
              color: #008fff;
            }
          }
        }
      }

      .consult-left-con {
        width: 100%;

        .consult-left-con-item1 {
          width: 100%;
          display: flex;
          margin-bottom: 10px;
          justify-content: space-between;

          .consult-left-con-item-img {
            width: 190px;
            height: 135px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .consult-left-con-item1-con {
            width: 70%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            .consult-left-con-item1-con-title {
              font-size: 18px;
              color: #333;
            }

            .consult-left-con-item1-con-time {
              font-size: 12px;
              color: #999;
              margin: 10px 0 20px 0;
            }

            .consult-left-con-item1-con-text {
              font-size: 12px;
              color: #333;
            }
          }
        }

        .consult-left-con-item {
          display: flex;
          justify-content: space-between;
          height: 52px;
          font-size: 12px;
          padding-left: 15px;
          position: relative;
          border-bottom: 1px solid #ededed;

          &::before {
            position: absolute;
            content: '';
            width: 4px;
            height: 4px;
            background: #000;
            left: 0px;
            top: 40%;
          }

          .consult-left-con-item-text {
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .consult-left-con-item-time {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #888;
          }
        }
      }
    }

    .consult-right {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;

      .consult-right-con {
        position: relative;
        width: 374px;
        height: 494px;
        padding: 20px;
        color: #fff;
        background: url('../assets/consult-right-con-bg.png');

        .consult-right-con-word1 {
          position: absolute;
          font-size: 24px;
          font-weight: 700;
          margin-left: 50px;
          margin-top: 30px;
        }

        .consult-right-con-word2 {
          position: absolute;
          font-size: 14px;
          left: 50%;
          transform: translateX(-50%);
          bottom: 80px;
        }

        .consult-right-con-mp4 {
          background: #fff;
          padding: 20px;
          box-shadow: 0px 0px 7px 1px #c7c7c7;
          transform: translate(-10%, 40%);
          width: 398px;
          height: 246px;
        }
      }
    }
  }
}

.contact {
  width: 100%;
  height: 250px;
  background: url('../assets/contact-bg.jpg');
  background-size: 100% 100%;

  .contact-box {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;

    .contact-title {
      font-size: 18px;
      margin-bottom: 20px;
    }

    .contact-button {
      width: 181px;
      height: 48px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #fff;
      border-radius: 15px;
      cursor: pointer;

      &:hover {
        background: #fff;
        color: #008fff;
      }
    }
  }
}

.bottomCon {
  width: 100%;
  height: 315px;
  background: #383838;
  padding-top: 80px;

  .bottom-box {
    display: flex;
    justify-content: space-between;
    width: 1200px;
    height: 100%;
    margin: 0 auto;

    .bottom-left {
      .bottom-left-img {
        width: 149px;
        height: 43px;
        margin-bottom: 25px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .bottom-left-itemList {
        .bottom-left-item {
          display: flex;
          color: #777;
          font-size: 12px;
          margin-bottom: 15px;

          .bottom-left-item-icon {
          }

          .bottom-left-item-text {
            margin-left: 20px;
          }
        }
      }
    }

    .bottom-center {
      margin-top: 20px;

      .bottom-center-con {
        display: flex;
        justify-content: space-between;
      }

      .bottom-center-con-itemList {
        margin-right: 50px;

        .bottom-center-con-item1 {
          font-size: 18px;
          color: #fff;
        }

        .bottom-center-con-item {
          margin-bottom: 15px;

          a {
            font-size: 12px;
            color: #777;

            &:hover {
              color: #008fff;
            }
          }
        }
      }
    }

    .bottom-right {
      display: flex;
      align-items: center;
      flex-direction: column;

      .bottom-right-img {
        padding: 10px;
        margin-bottom: 20px;
        background: #fff;

        img {
          width: 98px;
          height: 100px;
        }
      }

      .bottom-right-word {
        color: #777;
        font-size: 12px;
      }
    }
  }
}

.archivalInformation {
  width: 100%;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  background: #383838;
  color: #4a4a4a;
  border-top: 1px solid #585858;
}

.toolBar-show {
  position: fixed;
  bottom: 40%;
  right: 10px;
  z-index: 99999;
  cursor: pointer;
}

.toolBar {
  position: fixed;
  z-index: 999999;
  padding: 5px 0;
  top: 30%;
  right: 0px;
  width: 50px;
  height: 150px;
  background: #c1bfc0;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  transition: all 0.5s;

  .toolBar-up,
  .toolBar-down {
    cursor: pointer;
  }

  .toolBar-phone {
    cursor: pointer;
    position: relative;
    width: 26px;
    height: 26px;

    img {
      width: 100%;
      height: 100%;
    }

    .toolBar-phone-box {
      position: absolute;
      width: 150px;
      height: 150px;
      background: #c1bfc0;
      border-radius: 10px;
      right: 0px;
      top: 0;
      transform: translateX(200px);
      transition: transform 0.5s;
      z-index: 999;
      color: #e7f5ff;
      display: flex;
      flex-direction: column;
      padding: 20px;

      .toolBar-phone-box-top {
        font-size: 20px;
        padding-bottom: 10px;
        margin-bottom: 30px;
        border-bottom: 1px solid #cfcdce;
      }

      .toolBar-phone-box-num {
        border: 1px solid #a79e9e;
        padding: 5px 10px;
        font-size: 14px;
        border-radius: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0px 0px 4px #9c9797;
      }
    }
  }

  .toolBar-email {
    cursor: pointer;
    position: relative;
    width: 26px;
    height: 26px;

    img {
      width: 100%;
      height: 100%;
    }

    .toolBar-email-box {
      position: absolute;
      width: 150px;
      height: 45px;
      background: #c1bfc0;
      border-radius: 10px;
      right: 0px;
      top: 0;
      transform: translateX(200px);
      transition: transform 0.5s;
      z-index: 999;
      color: #e7f5ff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.backTop {
  position: fixed;
  z-index: 999999;
  padding: 5px 0;
  bottom: 10px;
  right: 0px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #c1bfc0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  img {
    width: 35px;
    height: 35px;
  }
}
</style>
<style>
@keyframes imageSlideUp {
  0% {
    transform: translateY(200px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    /* 向上位移的距离可以根据你的需求进行调整 */
    opacity: 1;
  }
}

.animate {
  animation: imageSlideUp 0.5s ease-out;
  /* 图片向上位移的距离 */
}

@keyframes boxToLeft {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  100% {
    transform: translateX(250);
    right: 0px;
    /* 向上位移的距离可以根据你的需求进行调整 */
    opacity: 1;
  }
}

.boxToLeft {
  animation: boxToLeft 0.5s ease-out;
  /* 图片向上位移的距离 */
}
</style>
